<template>
	<div id="firstcomponent">
		<div v-if="start">
			加载中.........
		</div>
		<div v-else class="slist">
			<router-link :to="{ name: 'home' }">首页</router-link>
			<p class="title">{{title}}</p>
			<ul>
				<li v-for="item in date"><router-link :to="{ name: 'show', params: { id: id,sid:item.sid}}">{{item.title}}</router-link></li>
			</ul>
		</div>
	</div>
</template>


<script type="text/javascript">
		export default{
			data(){
				return{
					title:"列表页",
					count:"789456789",
					id:'',
					start:true,
					date:[]
				}
			},
			mounted(){
					//console.log("vue加载成功");
			},
			created(){
				console.log(this.$route.params.id);
				this.id=this.$route.params.id;
	            this.$http.jsonp("http://localhost:3000/booklist?id="+this.$route.params.id).then(function(res){
	            	console.log("请求成功");
	                //this.date=eval(res.body);
	                this.date=res.data;
	                this.start=false;
	                

	            },function(res){
	            	console.log("请求失败");
	            });

	        },
			methods: {}
		}
</script>

<style type="text/css">
	.slist{width:1200px;margin: auto;}
	.slist ul{padding: 0px;margin: 0px;}
	.slist ul li{width: 250px;float: left;border: #ddd solid 1px;line-height: 28px;overflow: hidden;padding: 0px 10px;height: 28px;}
	.slist ul li a{text-decoration: none;color: #333;font-style: 12px;}
	.slist ul li a:hover{color: red;}
</style>